<template>
    <div>
        <div class="left">
            <el-tooltip>
                <el-switch
                    @change='changeFn'
                    v-model="type"
                    active-color="#13ce66"
                    inactive-color="#34BFA3"
                    active-text="动态展示"
                    inactive-text="静态展示"
                    active-value="1"
                    inactive-value="2">
                </el-switch>
            </el-tooltip>
        </div>
        <div class="left sel">
            <template>
                <span>{{type==1?'请选择加载时间:':'请选择展示数量:'}}</span>
                <el-select @change="chooseFn" size="mini" v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <span>{{type==1?'单位毫秒':'单位条'}}</span>
            </template>
        </div>
        <div class="clear"></div>
        <div id="main"></div>
    </div>
</template>
<script>
import {userStatis} from "@/api/statis";
export default {
    name:'user',
    data(){
        return{
            times:null,
            userList:[],
            num:20,
            xList:[],
            yList:[],
            type:'1',
            value:2000,
            values:0,
            options:[],
            options1:[
                {
                    value:500
                },
                {
                    value:1000
                },
                {
                    value:1500
                },
                {
                    value:2000
                },
                 {
                    value:2500
                },
                {
                    value:3000
                },
                {
                    value:'暂停加载'
                },
            ],
            options2:[
                {
                    value:10
                },
                {
                    value:20
                },
                {
                    value:30
                },
                {
                    value:60
                },
                 {
                    value:90
                },
                {
                    value:120
                },
                {
                    value:'全部展示'
                },
            ]
        }
    },
    async mounted(){
        let _self = this;
        await userStatis().then(res=>{
            console.log(res);
            if(res.errno==0){
                _self.userList = res.data.rows; 
            }
        })
        if(_self.type==1){
            _self.options = _self.options1
            _self.echFn1()
        }else{
            _self.options = _self.options2
            _self.echFn2()
        }
       
    },
    beforeDestroy(){
        let _self = this;
        clearInterval(_self.times)
    },
    methods:{
        chooseFn(val){
            let _self = this;
            console.log(val,_self.value);
            if(_self.type==1){
                clearInterval(_self.times)
                if(!isNaN(_self.value)){
                    _self.echFn1()
                }
                //不是数字的时候  暂停
            }else{
                _self.echFn2();

            }
            console.log(val,_self.value);
        },
        changeFn(val){
            let _self = this;
            _self.type = val;
            if(_self.type==1){
                _self.options = _self.options1
                _self.value = _self.values;
                _self.echFn1()
            }else{
                _self.options = _self.options2
                _self.values = _self.value;
                _self.value = 20;
                _self.echFn2()
                clearInterval(_self.times)
            }
        },
        echFn1(){
            let _self = this;
            _self.xList=[];
            _self.yList=[];
            let arr = _self.userList.filter((item,index)=>index<=_self.num && index>=_self.num-20)
            for(let item of arr){
                _self.xList.push(item.day);
                _self.yList.push(item.users)
            }
            _self.times = setInterval(()=>{
                _self.num++;
                _self.xList.shift();
                _self.xList.push((_self.userList.filter((item,index)=>index==_self.num))[0].day)
                _self.yList.shift();
                _self.yList.push((_self.userList.filter((item,index)=>index==_self.num))[0].users)
                myChart.setOption({
                    xAxis: [
                        {
                            data: _self.xList
                        }
                    ],
                    series: [
                        {
                            data: _self.yList
                        }
                    ]
                });
            },_self.value)
                //  let _self = this;
                var chartDom = document.getElementById('main');
                var myChart = _self.$echarts.init(chartDom);
                var option = {
                    color:['#34BFA3'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#283b56'
                        }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: _self.xList
                    },
                    yAxis: {
                        name: '用户增长数',
                        type: 'value'
                    },
                    legend: {
                        data: ['用户增长数']
                    },
                    series: [
                        {
                        name: '用户增长数',
                        data: _self.yList,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,		//开启显示
                                    position: 'top',	//在上方显示
                                    textStyle: {	    //数值样式
                                        color: '#34BFA3',
                                        fontSize: 14
                                    }
                                }
                            }
                        }
                        }
                    ]  
                }
                option && myChart.setOption(option);
                window.addEventListener("resize", function(){
                    myChart.resize();
                });  
        },
        echFn2(){
                let _self = this;
                var chartDom = document.getElementById('main');
                var myChart = _self.$echarts.init(chartDom);
                let arr = [];
                _self.xList=[];
                _self.yList=[];
                if(isNaN(_self.value)){
                    //不是数字的时候  全部展示
                    arr = _self.userList
                }else{
                    arr = _self.userList.filter((item,index)=>index<=_self.value)
                }
                for(let item of arr){
                    _self.xList.push(item.day);
                    _self.yList.push(item.users)
                }
                var option = {
                    color:['#34BFA3'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#283b56'
                        }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: _self.xList
                    },
                    yAxis: {
                        name: '用户增长数',
                        type: 'value'
                    },
                    legend: {
                        data: ['用户增长数']
                    },
                    series: [
                        {
                        name: '用户增长数',
                        data: _self.yList,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,		//开启显示
                                    position: 'top',	//在上方显示
                                    textStyle: {	    //数值样式
                                        color: '#34BFA3',
                                        fontSize: 14
                                    }
                                }
                            }
                        }
                        }
                    ]  
                }
                option && myChart.setOption(option);
                window.addEventListener("resize", function(){
                    myChart.resize();
                });  
        }
    }

}
</script>
<style scoped>
.left{
    float: left;
}
.right{
    float: right;
}
.clear{
    clear:both
}
#main{
    width: 100%;
    height: 400px;
    box-sizing: border-box;
    margin-top:20px;
    padding: 20px;
    /* box-shadow: 0px 0px 10px 3px rgb(167, 167, 167); */
    background-color: rgba(242,246,252,1);
    border-radius: 20px;
}
.sel{
    margin-left: 20px;
}
</style>